//PPzixuListPage
<template>
  <div :class="['PPzixuListPage']">

    <div class="view">
      <template v-if="store.state.pinpZXData.length===0">
        <div class="nodata">
          <img src="img/index/7.png">
        </div>
      </template>
      <template v-else>
        <div class="zixListDiv">
          <ul class="ul">
            <li class="li" v-for="(item,index) in pagesData.list" :key="index">
              <InformationItemView  :msg="item"></InformationItemView>
            </li>
          </ul>
        </div>
        <div :class='["pageMaDiv",((pagesData.totalPage>1)?"viewShow":"viewHide")]'>
          <ul class="ul">
            <li :class='["li",((pagesData.totalGroup!==0&&pagesData.grouppage!==1)?"viewShow":"viewHide")]'>
              <div @click="shouweiClick(1)">首页</div>
            </li>
            <li :class='["li",((pagesData.totalGroup>1&&pagesData.myPages!==1)?"viewShow":"viewHide")]'>
              <div  @click="nextpreClick(0)">上一页</div>
            </li>
            <li :class='["li",((pagesData.totalGroup!==0&&pagesData.grouppage!==1)?"viewShow":"viewHide")]'>
              <div  @click="groupClick(0)">上10页</div>
            </li>
            <li class="li" v-for="(item,index) in  pagesData.pageList" :key="index">
              <div :class='[(pagesData.myPages==item?"xz":"")]' @click="pageClick(item)">{{item}}</div>
            </li>
            <li :class='["li",((pagesData.totalGroup!==0&&pagesData.grouppage!==pagesData.totalGroup)?"viewShow":"viewHide")]'>
              <div @click="groupClick(1)">下10页</div>
            </li>
            <li :class='["li",((pagesData.totalGroup>1&&pagesData.myPages!==pagesData.totalPage)?"viewShow":"viewHide")]'>
              <div @click="nextpreClick(1)">下一页</div>
            </li>
            <li :class='["li",((pagesData.totalGroup!==0&&pagesData.grouppage!==pagesData.totalGroup)?"viewShow":"viewHide")]'>
              <div @click="shouweiClick(0)">尾页</div>
            </li>
          </ul>
        </div>
      </template>


    </div>

  </div>
</template>


<style scoped>
.PPzixuListPage{
  position: relative;width: 100%;background-color: #F6F8E3;
}

.view{
  position: relative;max-width: 1200px;margin: auto;
}
.zixListDiv{
  position: relative;padding-top: 70px;
}
.zixListDiv .ul{
  position: relative;width: 90%;margin: auto;
}
.zixListDiv .ul .li{
  position: relative;padding-bottom: 34px;
}

.pageMaDiv{
  position: relative;padding-bottom: 160px;margin: auto;padding-top: 36px;
}
.pageMaDiv .ul{
  position: relative;
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;
}
.pageMaDiv .ul .li{
  position: relative;padding: 0 10px;
  /*8display: flex;*/
}
.pageMaDiv .ul .li *{
  position: relative;
}
.pageMaDiv .ul .li div{
  background-color: #F6F8E3;border-radius: 2px;border: 1px solid #84AE4C;cursor: pointer;color: #84AE4C;line-height: 32px;
  padding: 0 5px;min-width: 20px;
}
.pageMaDiv .ul .li .xz{
  background-color: #84AE4C;color: #FDF5E6;
}

.pageMaDiv .ul .li .page{

}

.nodata{
  position: relative;
}
.nodata img{
  width: 100%;
}

</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import InformationItemView from "@/views/components/InformationItemView";
import Enum from "@/js/Enum";
let store = useStore();


/**分页数据**/
let pagesData=reactive({
  /**每页数据条数**/
  maxPagesLen:5,
  /**页码分组**/
  zuPageLen:10,
  /**总页数**/
  totalPage:0,
  /*总组数**/
  totalGroup:0,
  /**当前页 最小1,0没有**/
  myPages:0,
  /**当前组**/
  grouppage:0,
  /**数据**/
  list:[],
  /**一组页码**/
  pageList:[],

});


onMounted(() => {
  console.log("PPzixuListPage onMounted 品牌咨询二级页面 初始化");
  window.scrollTo(0, 0);
  setTotalPagehandler();
});


onBeforeUnmount(() => {
  console.log('PPzixuListPage onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("PPzixuListPage onUnmounted 卸载组件实例后  ");
});


let is_listLenstaue=false;
let listLenstaue=computed(()=>{return store.state.pinpZXData.length;});
watch(listLenstaue,(newValue,oldValue)=>{
  if(is_listLenstaue)return;
  is_listLenstaue=true;
  setTotalPagehandler();
});

let grouppagestaue=computed(()=>{return pagesData.grouppage;});
watch(grouppagestaue,(newValue,oldValue)=>{
  console.log("PPzixuListPage grouppagestaue,组变化");
  let start=(pagesData.grouppage-1)*pagesData.zuPageLen;
  let end=start+pagesData.zuPageLen;
  if(end>pagesData.totalPage){
    end=pagesData.totalPage;
  }
  pagesData.pageList=[];
  for(let i=start;i<end;i++){
    pagesData.pageList.push(i+1);
  }
  pagesData.myPages=pagesData.pageList[0];
});
let setTotalPagehandler=()=>{
  console.log("PPzixuListPage setTotalPagehandler 数据总数变化",listLenstaue.value);
  if(listLenstaue.value===0){
    pagesData.totalPage=0;
    pagesData.myPages=0;
  }else{
    pagesData.totalPage=Math.floor(listLenstaue.value/pagesData.maxPagesLen);
    if(listLenstaue.value%pagesData.maxPagesLen!==0){
      pagesData.totalPage+=1;
    }
    //总组数
    pagesData.totalGroup=Math.floor(pagesData.totalPage/pagesData.zuPageLen);

    if(pagesData.totalPage%pagesData.zuPageLen!==0){
      pagesData.totalGroup++;
    }
    console.log("PPzixuListPage setTotalPagehandler 数据总数变化",pagesData.totalPage,pagesData.totalGroup);
    pagesData.grouppage=1

  }
}

let mypagestaue=computed(()=>{return pagesData.myPages;});
watch(mypagestaue,(newValue,oldValue)=>{
  console.log("PPzixuListPage mypagestaue 页码变化",store.state.pinpZXData.length);
  pagesData.list=[];
  if(pagesData.myPages===0)return;
  let start=(pagesData.myPages-1)*pagesData.maxPagesLen;
  if(start<0)start=0;
  let end=start+pagesData.maxPagesLen;
  for(let i=start;i<end;i++){
    if(i<store.state.pinpZXData.length){
      pagesData.list.push(store.state.pinpZXData[i]);
    }
  }
});




let pageClick=(index)=>{
  console.log("PPzixuListPage pageClick",index);
  pagesData.myPages=index;
}
let groupClick=(type)=>{
  //console.log("PPzixuListPage groupClick 1:下一组,0:上一组",type);
  console.log("PPzixuListPage groupClick ",pagesData.totalGroup,pagesData.grouppage);
  let index=pagesData.grouppage;
  if(type===1){
    index++;
    if(index>pagesData.totalGroup)index=pagesData.totalGroup;
  }else{
    index--;
    if(index<1)index=1;
  }
  pagesData.grouppage=index;
}

let shouweiClick=(type)=>{
  //console.log("PPzixuListPage shouweiClick 1:首页点击,0:尾页点击",type);
  if(type===1){
    pagesData.grouppage=1;
  }else{
    pagesData.grouppage=pagesData.totalGroup;
  }
}

let nextpreClick=(type)=>{
  //console.log("PPzixuListPage shouweiClick 1:下一页,0:上一页点击",type);

  let index=pagesData.pageList.indexOf(pagesData.myPages);
  console.log("PPzixuListPage shouweiClick 1:下一页,0:上一页点击",type,index);
  if(type===1){
    index++;
    if(index<pagesData.pageList.length){
      pagesData.myPages=pagesData.pageList[index];
    }else{
      groupClick(1);
    }
  }else{
    index--;
    if(index>=0){
      pagesData.myPages=pagesData.pageList[index];
    }else{
      groupClick(0);
    }
  }
}




</script>

